<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/layout.css" />
<style>
	#slider-info .container{
		width:725px;
		height:280px;
		overflow:hidden;
		position:relative;
		}	
	.slider{
		position:absolute;
		width:3000px;
		}
	.slider li{
		display:inline;
		float:left;
		}
	.slider img{
		width:725px;
		height:280px;
		display:block;
		}
	.num{
		position:absolute;
		right:5px;
		bottom:5px;
		}	
	.num li{
		float: left;
		color: #FF7300;
		text-align: center;
		line-height: 16px;
		width: 16px;
		height: 16px;
		font-family: Arial;
		font-size: 12px;
		cursor: pointer;
		overflow: hidden;
		margin: 3px 1px;
		border: 1px solid #FF7300;
		background-color: #fff;
		}
	.num li.on{
		color: #fff;
		line-height: 21px;
		width: 21px;
		height: 21px;
		font-size: 16px;
		margin: 0 1px;
		border: 0;
		background-color: #FF7300;
		font-weight: bold;
	}	
	#experience .hd{
		height:26px;
		line-height:26px;
		border:none;
		border-bottom:1px solid #ccc;
		background:none;
		}
	#experience .hd h2{
		font-size:14px;
		}
	#summary-list	{
		padding:20px 0;
		}		
	#summary-list	li{
		float:left;
		width:140px;
		height:70px;
		margin-right:5px;
		}
	#summary-list	li a{
		display:inline-block;
		padding-top:10px;
		}		
	#summary-list	li .n1,#summary-list li .n2,#summary-list li .n3,#summary-list li .n4,#summary-list li .n5{
		padding-left:75px;
		height:60px;
		background:url(img/index-list.jpg) no-repeat;
		}
	#summary-list li .n2{
		background-position:0 -74px;
		}	
	#summary-list li .n3{
		background-position:0 -150px;
		}
	#summary-list li .n4{
		background-position:0 -229px;
		}
	#summary-list li .n5{
		background-position:0 -308px;
		}								
	#summary-list	li span{
		font-weight:bold;
		}	
	#summary-list	li .c2{
		color:#f96218;
		}
	#summary-list	li .c3{
		color:#22bf29;
		}	
	#summary-list	li .c4{
		color:#83ad12;
		}	
	#summary-list	li .c5{
		color:#d61b47;
		}
	#experience .bd{
		border:none;
		padding:0;
		}										
	#experience #text-list{
		padding-top:10px;
		border-top:1px solid #ccc;
		}	
	#experience #text-list li{
		line-height:25px;
		padding-left:15px;
		background:url(img/icon.png) no-repeat 0 -262px;		
		}				
	#login-panel .bd,#reg-guide .bd{
		border:1px solid #93c4e6;
		background:#e8f4fa;
		padding:5px 15px;
		overflow:hidden;
		}
	.login-form h3{
		font-size:14px;
		}
	.login-form p{
		line-height:20px;
		margin:10px 0;
		}
	.login-form label{
		display:block;
		line-height:20px;
		}
	.login-form .input-text{
		width:180px;
		padding:3px;
		border:1px solid #b9d6e8;
		}
	.login-form .labelCheckbox{
		font-weight:normal;
		}	
	.login-form .labelCheckbox input{
		margin-right:5px;
		vertical-align:middle;
		}					
	.login-form #help{
		border-top:1px solid #d3d3d3;
		margin-top:5px;
		padding:5px;
		}
	#help span{
		display:inline-block;
		margin-left:15px;	
		color:#ff6801;	
		}
	#help span a{
		color:#ff6801;
		}
	#reg-guide a{
		color:#fff;
		}					
	.gotoreg {
		width:158px;	
		height:34px;
		line-height:1.5em;
		margin:4px 0 0;
		padding:7px 0 0 35px;	
		color:#fff;
		display:block;
		font-family:微软雅黑;
		font-size:18px;
		font-weight:700;	
		background:transparent url(img/sprite.png) no-repeat 0 -34px;
		}		
</style>
</head>
<body>
	<div id="container">
		<div id="header">
			<div id="banner">
				<img src="img/banner.jpg" />
			</div>
			<div id="navbar">
				<span class="tl"></span><span class="tr"></span>
				<h1 id="logo">
					<a  title="" href="#"><img src="img/logo.png" alt="" /></a>
				</h1>
				<ul id="nav-main">
					<li><a href="#">首页</a></li>
					<li><a href="#">品牌俱乐部</a></li>
					<li><a href="#">城市消费圈</a></li>
					<li><a href="#">消费空间论坛</a></li>
					<li><a href="#">消费E族</a></li>
				</ul>
				<ul id="nav-sub">
					<li><a href="#">邀请</a></li>
					<li><a href="#">个人中心</a></li>
					<li><a href="#">消息</a></li>
					<li><a href="#">隐私</a></li>
					<li><a href="#">退出</a></li>
				</ul>
			</div>
		</div>
		<div id="content">
			<div class="col-main">
				<div id="slider-info" class="box">
					<div class="container" id="idTransformView">
					  <ul class="slider" id="idSlider">
					    <li><img src="img/index1.jpg"/></li>
					    <li><img src="img/index2.jpg"/></li>
					    <li><img src="img/index3.jpg"/></li>
					  </ul>
					  <ul class="num" id="idNum2">
					    <li>1</li>
					    <li>2</li>
					    <li>3</li>
					  </ul>
					</div>							
				</div>
				<div id="experience" class="box ">
					<div class="hd">
						<h2>立即体验</h2>
					</div>
					<div class="bd">
						<ul id="summary-list" class="clearfix">
							<li>
								<a href="#" class="n1">
									<span class="c1">金屋真我,品牌我创！</span>
								</a>
							</li>
							<li>
								<a href="#" class="n2">
									<span class="c2">来B-Club和好友轻松互动！</span>
								</a>
							</li>							
							<li>
								<a href="#" class="n3">
									<span class="c3">体验消费，享受快乐！</span>
								</a>								
							</li>
							<li>
								<a href="#" class="n4">
									<span class="c4">让世界聆听你的声音！</span>
								</a>									
							</li>
							<li>
								<a href="#" class="n5">
									<span class="c5">一路同行，成就梦想！</span>
								</a>								
							</li>																					
						</ul>
						<ul id="text-list">
							<li><a href="#">和朋友分享你的价值和消费乐趣，实现自我价值和拓展关系基础,自造个人影响力 </a></li>
							<li><a href="#">基于对品牌共同信仰的朋友而相互联系，和品牌亲密接触，实现对爱、个性、激情及品位的追求，提升生活质量 </a></li>  
							<li><a href="#">体验消费，参与互动，畅享商品优惠、活动推广带给你的无限乐趣，并享受如何被猎取的兴奋... </a></li>
							<li><a href="#">激起你的头脑风暴、贡献你的消费经验，让世界为你而喝彩！ </a></li>
							<li><a href="#">和你的朋友一路同行，成就金色梦想！ </a></li>							
						</ul>						
					</div>
				</div>				
			</div>
			<div class="col-side">
				<div id="login-panel" class="skin-blue box">
					<span class="rc-tp"><span></span></span>
					<div class="bd clearfix">
						<form id="loginForm" class="login-form" action="#" method="post">
							<h3>已拥有帐号</h3>
							<p>
								<label for="email">账号:</label>
								<input id="email" class="input-text" type="text" value="" tabindex="1" name="email"/>
							</p>
							<p>
								<label for="password">密码:</label>
								<input id="password" class="input-text" type="password" tabindex="2" error="请输入密码" name="password"/>
							</p>
							<p>
								<label id="autologlabel" class="labelCheckbox" for="autoLogin">
									<input id="autoLogin" type="checkbox" tabindex="3" value="true" name="autoLogin"/>
									下次自动登录
								</label>
							</p>
							<p>
								<a class="right" href="#">找回密码</a>
								<input type="hidden" value="" name="origURL"/>
								<input id="login" class="input-submit" type="submit" tabindex="4" value="登 录"/>
							</p>				
						</form>
						<div id="help">
							<span> >><a href="#">体验互动 </a></span><span> >><a href="#">使用帮助</a></span>
						</div>						
					</div>
					<span class="rc-bt"><span></span></span>
				</div>
				<div id="reg-guide" class="skin-blue box">
					<span class="rc-tp"><span></span></span>
					<div class="bd">
						<p class="portal">还没有开通你的金屋网帐号？</p>
						<a class="gotoreg" href="#">立即注册</a>
					</div>
					<span class="rc-bt"><span></span></span>			
				</div>					
			</div>		
		</div>
		<div id="footer">
			<p>
				<span class="left">金屋公司© 2009</span> 
				<span class="right">
					<a href="#">关于金屋</a>
					<a href="#">用户建议</a>  
					<a href="#">联系我们</a> 
					<a href="#">品牌合作</a>
					<a href="#">版权和隐私</a>   
					<a href="#">招纳英才</a>   
					<a href="#">友情网站</a>
				</span>
			</p>
		</div>
	</div>
<script src="js/scroll.js" type="text/javascript"></script>	
</body>
</html>